<template>
    <div v-if="indexShow">
        <!-- props: {{ props }} -->
        <a-row :gutter="24">

            <a-col :span="6"> <a-card :bordered="false">
                    <a-directory-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
                        @select="tableRef.refresh(true)" :style="{
        'min-height': '500px',
        height: '100%',
        'overflow-y': 'auto',
        'text-align': 'left'
    }" :tree-data="treeData" :fieldNames="{ children: 'children', title: 'name', key: 'id' }"></a-directory-tree>
                </a-card>
            </a-col>
            <a-col :span="18">
                <a-card :bordered="false" class="mb-2" v-show=showFilter>
                    <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState">
                        <a-row :gutter="24">

                            <a-col :span="8">
                                <a-form-item name="searchKey" label="项目名称">
                                    <a-input-search v-model:value="searchFormState.proName" style="width: 100%"
                                        placeholder="选择的项目" @click="onSearch" @search="onSearch" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="文件名" name="searchKey">
                                    <a-input v-model:value="searchFormState.searchKey" placeholder="请输入文件名" />
                                </a-form-item>
                            </a-col>

                            <a-col :span="6">
                                <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                                <a-divider type="vertical" />

                                <a-button :disabled="searchFormState.proName == null || form.proFileId == null"
                                    type="primary" @click="onUpload()">上传文件</a-button>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-card>
                <a-card :bordered="false">

                    <s-table :columns="columns" ref="tableRef" :data="loadData" class="mb-2" bordered>
                        <template #bodyCell="{ column, record, index }">
                            <template v-if="column.key === 'index'">
                                {{ index + 1 }}
                            </template>
                            <template v-if="column.dataIndex === 'thumbnail'">
                                <img :src="record.thumbnail" class="record-img" v-if="record.suffix === 'png' ||
        record.suffix === 'jpg' ||
        record.suffix === 'jpeg' ||
        record.suffix === 'ico' ||
        record.suffix === 'bmp' ||
        record.suffix === 'gif'
        " />
                                <img src="/src/assets/images/fileImg/docx.png" class="record-img"
                                    v-else-if="record.suffix === 'doc' || record.suffix === 'docx'" />
                                <img src="/src/assets/images/fileImg/xlsx.png" class="record-img"
                                    v-else-if="record.suffix === 'xls' || record.suffix === 'xlsx'" />
                                <img src="/src/assets/images/fileImg/zip.png" class="record-img"
                                    v-else-if="record.suffix === 'zip'" />
                                <img src="/src/assets/images/fileImg/rar.png" class="record-img"
                                    v-else-if="record.suffix === 'rar'" />
                                <img src="/src/assets/images/fileImg/ppt.png" class="record-img"
                                    v-else-if="record.suffix === 'ppt' || record.suffix === 'pptx'" />
                                <img src="/src/assets/images/fileImg/pdf.png" class="record-img"
                                    v-else-if="record.suffix === 'pdf'" />
                                <img src="/src/assets/images/fileImg/txt.png" class="record-img"
                                    v-else-if="record.suffix === 'txt'" />
                                <img src="/src/assets/images/fileImg/html.png" class="record-img"
                                    v-else-if="record.suffix === 'html'" />
                                <img src="/src/assets/images/fileImg/file.png" class="record-img" v-else />
                            </template>
                            <template v-if="column.key === 'control'">
                                <div>
                                    <a :href="record.downloadPath" target="_blank">下载</a>
                                    <a-divider type="vertical" />
                                    <!-- <a @click="onView(record)" 		<a v-if="previewDisplay(record)" @click="onPreview(record)">预览</a>>浏览</a> -->
                                    <a v-if="previewDisplay(record)" @click="onPreview(record)">预览</a>
                                </div>
                            </template>
                        </template>
                    </s-table></a-card>
            </a-col>
           

            <a-drawer v-model:visible="visible" :width="600" :title="'上传文件'" placement="right"
                :style="{ position: 'absolute' }" :footer-style="{ textAlign: 'right' }">


                <a-form @finish="handleFinish" :model="form" ref="formRef" name="basic" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 18 }" autocomplete="off">


                    <a-form-item label="项目名称" name="proName">
                        <a-input v-model:value="form.proName" disabled style="width: 100%" placeholder="请输入项目名称" />
                    </a-form-item>


                    <a-form-item label="文件分类" name="proFileId" :rules="[{ required: true }]">
                        <a-tree-select v-model:value="form.proFileId" style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择分类" allow-clear
                            tree-default-expand-all :tree-data="treeData" :defaultExpandAllRows="true" :field-names="{
        children: 'children',
        label: 'name',
        value: 'id'
    }" selectable="false" tree-line></a-tree-select>
                    </a-form-item>
                    <a-form-item label="上传文件" name="file">
                        <fileUpload @uploadDone="uploadDone" :action="action_url" ref="uploadRef1" :type="1"
                            :uploadNumber="4">
                        </fileUpload>
                    </a-form-item>
                </a-form>
                <template #footer>
                    <a-button style="margin-right: 8px" @click="visible = false">关闭</a-button>

                </template>
            </a-drawer>


        </a-row>
    </div>
    <preview v-if="!indexShow" ref="previewRef" @goBack="previewBack" /> 
    <projectSelection ref="proSelect" @onClose="prSelectOk" :value="searchFormState.proId"  />
</template>
<script setup>
import api from '@/api/datacenter/index'
import { message } from 'ant-design-vue'
import fileUpload from '@/components/XnUpload/index.vue'
import projectSelection from '@/components/pm/projectSelection.vue'
import Preview from '@/views/dev/file/preview.vue'
const indexShow = ref(true)
const uploadRef1 = ref()
const tableRef = ref()
const form = ref({})
const previewRef = ref()
const searchFormState = ref({
})
const visible = ref(false)
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 80,
        align: 'center',
    },

    {
        title: '文件名称',
        dataIndex: 'name',
        key: 'name',
        width: 400,
        align: 'center',
    },

    {
        title: '文件类型',
        dataIndex: 'suffix',
        key: 'suffix',
        width: 80,
        align: 'center',
    },
    {
        title: '文件大小',
        dataIndex: 'sizeInfo',
        key: 'sizeInfo',
        width: 80,
        align: 'center',
    },

    {
        title: '创建者',
        dataIndex: 'createUserName',
        key: 'createUserName',
        align: 'center',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
    },
    {
        title: '缩略图',
        dataIndex: 'thumbnail',
        ellipsis: true,
        width: 80,
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        align: 'center',
    },
]
const showFilter = ref(true)
const props = defineProps({
    value: {
        type: Object,
        default: null
    },

})
watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            showFilter.value = false
            searchFormState.value.proId = props.value.id
            searchFormState.value.proName = props.value.name
        }
    },
    { deep: true, immediate: true }
)

const expandedKeys = ref([]);
const selectedKeys = ref([]);
const treeData = ref([])

const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const setDefaultValue = () => {
    console.log("setDefaultValue")
    proSelect.value.getDefaultValue().then(records => {
        console.log("default", records)
        if (records) {
            searchFormState.value.proId =records[0].id
            searchFormState.value.proName = records[0].name
        }
    })
}
nextTick(() => {
    setDefaultValue();
})



const prSelectOk = (selectedRowKeys, selectRecords) => {
    searchFormState.value.proId = selectRecords[0].id
    searchFormState.value.proName = selectRecords[0].name
    // tableRef.value.refresh(true)
    loadTree()
}
// loadTree()
const loadTree = async () => {
    if (!searchFormState.value.proId) {
        return;
    }
    const getexpandedKeys = (child) => {

        if (child.children) {
            expandedKeys.value.push(child.id)
            if (child.children) {
                child.children.forEach(element => {
                    getexpandedKeys(element)
                })
            }
        }
    }
    return api.tree({ "proid": searchFormState.value.proId }).then((res) => {
        console.log("tree res", res)
        if (!res) {
            treeData.value = []
            selectedKeys.value = []
            tableRef.value.refresh(true)
            return
        }
        treeData.value = res;
        expandedKeys.value = []
        getexpandedKeys(treeData.value[0])
        tableRef.value.refresh(true)
        return {
            "records": res,
            "total": res.length,
            "size": res.length,
            "current": 1,
            "orders": [],
            "optimizeCountSql": true,
            "searchCount": true,
            "maxLimit": null,
            "countId": null,
            "pages": 1
        };
    })
}
const loadData = (parameter) => {
    if (selectedKeys.value.length == 0) {
        // selectedKeys.value.push("9999")
        return;
    }
    if (selectedKeys.value[0] === "0") {
        return;
    }
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    searchFormState.value.searchKey = searchFormState.value.searchKey
    searchFormState.value.engine = searchFormState.value.engine
    searchFormState.value.proFileId = selectedKeys.value[0]
    form.value.proFileId = selectedKeys.length != 0 ? selectedKeys.value[0] : 0
    return api.pagedatacenter(searchFormState.value).then(res => {
        return res
    });
}
const action_url = computed(() => {
    return '/api/webapp/dev/file/uploadProMinioReturnUrl?proFileId=' + form.value.proFileId
})
const uploadDone = (result) => {
    console.log("uploadDone", result)
    visible.value = false
    tableRef.value.refresh(true)
    uploadRef1.value.clear()
    message.success('操作成功')
}
const onUpload = () => {
    visible.value = true
}

// 判断是否显示预览按钮
const previewDisplay = (record) => {
    if (!record.suffix) {
        return false
    }
    const suffix = record.suffix.toLowerCase()
    if (
        suffix === 'doc' ||
        suffix === 'docx' ||
        suffix === 'xls' ||
        suffix === 'xlsx' ||
        suffix === 'pdf' ||
        suffix === 'jpg' ||
        suffix === 'png' ||
        suffix === 'gif' ||
        suffix === 'svg' ||
        suffix === 'ico' ||
        suffix === 'tmp' ||
        suffix === 'jpeg'
    ) {
        return true
    }
}
// 预览
const onPreview = (record) => {
    indexShow.value = false

    nextTick(() => {
        previewRef.value.onOpen(record)
    })
}
// 预览返回
const previewBack = () => {
    indexShow.value = true
}
</script>


<style scoped>
.record-img {
    width: 40px;
    height: 40px;
}
</style>